<!-- ALL By 黎乐仁 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue-router@4.5.0/dist/vue-router.global.js"></script>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<link rel="stylesheet" href="css/login.css">
		<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
		<div id="app">
			<div id="banner">
				<h1>学校管理系统</h1>
			</div>
			<div class="login" v-if="!isLogin && !isRegister">
				<button @click="loginPage">登录</button>
				<button @click="registerPage">注册</button>
			</div>
			<div class="login" v-if="isLogin">
				<h1>用户登录</h1>
				<div>
					电子邮箱：<input type="text" v-model="email"/>
				</div>
				<div>
					密码：<input type="text" v-model="userpwd"/>
				</div>
				<div>
					<button @click="login">登录</button>
					<button @click="back">返回</button>
				</div>
			</div>
			<div class="login" v-if="isRegister && !hasLogin">
				<h1>用户注册</h1>
				<div>
					用户名：<input type="text" v-model="username"/>
				</div>
				<div>
					电子邮件：<input type="text" v-model="email"/>
				</div>
				<div>
					密码：<input type="text" v-model="userpwd"/>
				</div>
				<div>
					重复密码：<input type="text" v-model="userpwd2"/>
				</div>
				<div>
					<button @click="register">注册</button>
					<button @click="back">返回</button>
				</div>
			</div>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						username: '',
						email: '',
						userpwd: '',
						userpwd2: '',
						isLogin: false,
						isRegister: false,
						hasLogin: false
					}
				},
				methods:{
					loginPage:function(){
						this.isLogin = true
					},
					registerPage:function(){
						this.isRegister = true
					},
					login:function(){
						var cookieArr = document.cookie.split(";")
						console.log("ALL By 黎乐仁")
						if('local_email=' + this.email == cookieArr[0] && ' local_userpwd=' + this.userpwd == cookieArr[1]){
							this.hasLogin = true
							this.isLogin = false
							window.location.href = "main.html"
						}else{
							alert("电子邮箱或密码错误！")
						}
					},
					register:function(){
						this.hasLogin = true
						// 设定过期时间
						var now = new Date();
						// 三分钟过期
						now.setMinutes(now.getMinutes()+3);
						document.cookie = 'local_email=' + this.email + ';expires=' + now.toGMTString();
						document.cookie = 'local_userpwd=' + this.userpwd + ';expires=' + now.toGMTString();
					},
					loginOut:function(){
						this.isLogin = false
						this.isRegister = false
						this.hasLogin = false
					},
					back:function(){
						this.isLogin = false
						this.isRegister = false
						this.hasLogin = false						
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
<!-- ALL By 黎乐仁 -->